<template>
  <el-card class="box-card">
    <div class="news_header">
      <MainSearchForm ref="supplierFormRef" :formList="formList" :formValue="formValue" @formReset="formChange" @formSearch="formChange"></MainSearchForm>
      <!-- <el-button size="mini" type="primary" class="add-btn" @click="addNews">新增</el-button> -->
    </div>
    <div class="" style="min-height: 600px">
      <MainTable
        ref="orderTable"
        :loading="listLoading"
        :columns="columns"
        :tableData="tableData"
        showSelection
        @selection-change="handleSelectionChange"
      >
        <template v-slot:status="{ row }">
          <span :style="{ color: getStatusText(row.status, 1) }">{{ getStatusText(row.status, 2) }}</span>
        </template>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <MainLink title="查看" @linkClick="linkClick(scope.row, 1)"></MainLink>
            <el-popconfirm
              v-if="scope.row.status == 0"
              confirm-button-text="是的"
              cancel-button-text="不用了"
              icon="el-icon-info"
              icon-color="red"
              title="确定禁用吗？"
              @onConfirm="changeStatus(scope.row)"
            >
              <MainLink color="#F56C6C" title="禁用" slot="reference"></MainLink>
            </el-popconfirm>
            <el-popconfirm
              v-if="scope.row.status == 1"
              confirm-button-text="是的"
              cancel-button-text="不用了"
              icon="el-icon-info"
              icon-color="#03A98E"
              title="确定启用吗？"
              @onConfirm="changeStatus(scope.row)"
            >
              <MainLink color="#03A98E" title="启用" slot="reference"></MainLink>
            </el-popconfirm>
          </template>
        </el-table-column>
      </MainTable>
    </div>

    <div class="pagination-right">
      <MainPagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout=" ->,total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </MainPagination>
    </div>
  </el-card>
</template>

<script>
import { $http, $post } from "@/api/index";
import MainTable from '@/components/MainTable/table.vue'
import { indexData } from '../MockData'
const { columns, formList, formValue } = indexData
export default {
  name: "news",
  components: {
    MainTable
  },
  data() {
    return {
      formList,
      formValue,
      tableData: [],
      currentPage: 1,
      pageSize: 20,
      total: 0,
      // 勾选的数据
      multipleSelection: [],
      // 新闻日期
      listLoading: false,
      columns,
      activeName: '0'
    };
  },
  activated() {
    this.getData();
  },

  methods: {
    linkClick(row, type) {
      this.$router.push({
        path: '/supplier/detail',
        query: {
          id: row.id,
          type,
          status: 1
        }
      })
    },
    //  表单搜索
    formChange() {
      this.currentPage = 1
      this.pageSize = 20
      this.getData()
    },
    getData() {
      this.listLoading = true;
      let data = {
        page: this.currentPage,
        page_size: this.pageSize,
        ...this.formValue,
        // status: this.activeName
      };
      $http('/Supplier/supplier-list', data).then(
        (res) => {
          console.log(res.data.list, 111);
          
          this.listLoading = false;
          this.tableData = res.data.list;
          this.total = res.data.total;
        },
        (err) => {
          console.log(err);
        }
      );
    },
    changeStatus(row) {
      const url = row.status == 0 ? '/Supplier/supplier-disable' : '/Supplier/supplier-enable'
      $post(url, { id: row.id }).then(res => {
        if(res.errcode == 0) {
          const msg = row.status == 0 ? '禁用供应商成功' : '启用供应商成功'
          this.$message.success(msg)
          this.getData()
        }else {
          this.$message.error(res.errmsg)
        }
      })
    },
    // 状态
    changeSwitch(e, row) {
      console.log("1", e, row);
    },
    // 勾选的数据
    handleSelectionChange(val) {
      console.log("val", val);
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    handleClick() {
      this.$refs.supplierFormRef.getFormRefs().resetFields();
      this.formChange()
    },
    //  表格-状态转化
    getStatusText(status, type) {
      const statusObj = {
        0: {
          text: '正常',
          color: '#03A98E'
        },
        1: {
          text: '禁用',
          color: '#E27C21'
        },
        3: {
          text: '黑名单',
          color: '#999999'
        },
      }
      return type === 1 ? statusObj[status].color : statusObj[status].text
    }
  },
  created() {
  },
};
</script>
<style lang="scss" scoped>
@import '../index.scss';
</style>
